<template>
<div>
    
  <el-table
    :data="products"
    style="width: 100%"
    border
    >
     <el-table-column
      prop="name"
      label="名称"
      align='center'
      >
    </el-table-column>

     <el-table-column
      prop="rate"
      label="年利率"
      align='center'
      >
    </el-table-column>

     <el-table-column
      prop="maxMoney"
      label="最大贷款金额"
      align='center'
      >
    </el-table-column>

    <el-table-column
      label="还款周期(月)"
      align='center'
      prop="time">
     
    </el-table-column>

     

    <el-table-column label="操作" align='center'>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

          <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>

  <el-dialog title="修改产品" :visible.sync="dialogTableVisible" >
      
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
         
        >
          

          <el-form-item label="产品名称">
            <el-input
              v-model="formData.name"
              maxlength="20"
              minlength="3"
              show-word-limit
    
              placeholder="请输入产品名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="产品年利率">
            <el-input
              v-model="formData.rate"
              maxlength="20"
              minlength="3"
              show-word-limit
              placeholder="请输入产品利率"
            ></el-input>
          </el-form-item>

          <el-form-item label="最大贷款金额">
            <el-input
              v-model="formData.maxMoney"
              maxlength="20"
              minlength="3"
              show-word-limit
              placeholder="请输入最大贷款金额"
            ></el-input>
          </el-form-item>

         <el-form-item label="还款周期">
            <el-input
              v-model="formData.time"
              maxlength="20"
              minlength="3"
              show-word-limit
              placeholder="请输入还款周期(月)"
            ></el-input>
          </el-form-item>

         

          <el-form-item>
            <el-button type="primary" @click="update" >立即修改</el-button>
          </el-form-item>
        </el-form>
       
    </el-dialog>


</div>

</template>

<script>
import global from '@/global.js';
  export default {
    created() {
        /**
         * 获取所有产品
        */
        

    this.$axios.post(global.server + "/api/product/getAll").then((response) => {
      console.log("产品信息", response.data);
      let result = response.data;
      if (result.code == 200) {
        console.log("产品信息", result.data);
        this.products = result.data;
      }
    });
   

    },
    data() {
      return {
        products:[],
       
        dialogTableVisible: false,
        application:'',
        result:'',
        formData: {
          name: "",
          rate: "",
          maxMoney: "",
          time: "",
        },
      }
    },


    methods: {
    /**
     * 编辑
     */
      handleEdit(index, row) {
        console.log(index, row);
        this.dialogTableVisible = true;
        this.formData = row;
        console.log("产品修改信息---------------->",this.formData)
      },

      update(){
        this.$axios.post(global.server + '/api/product/update',this.formData)
        .then(response => {
                if(response.data.code==200){
                  this.$alert("修改成功");
                  this.dialogTableVisible=false;
                }
                
            });
      },
      
      

      handleDelete(index, row) {
        console.log("删除信息------------------>")
          console.log(index, row);
         // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$message.success('删除成功');
                this.products.splice(index, 1);
                this.del(row.id)
            })
            .catch(() => {});  
    },

  


        del(id){
        console.log("formData---->",this.formData);
        this.$axios.post(global.server + '/api/product/delete/'+id)
        .then(response => {
                
                
            });
        }
    }
  }
</script>
<style scoped>

    .aaa{
      width: 300px;
    }
    
</style>